
angular.module('zixys.selector',[])

    .directive('selectorTab',function(){
        return {
            restrict: 'C',
            replace: false,
            template:
                    '<div id="zixys-background-tab" >'+
                        '<div class="zixys-inner-tab long-block" src="selector-options">'+
                            '<div>Select</div>'+
                            '<div>Selected Elements</div>'+
                            '<div>DOM Inspector Options</div>'+
                        '</div>'+
                        '<div id="selector-options">'+
                            '<div>'+
                                '<div class="zixys-menu-block-xxxl">'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">Selector:</span>' +
                                        '<input id="zx-selector-string" class="selector" ng-model="selector" type="text">' +
                                        '<input class="selector-btn" type="button" ng-click="searchElements()" value="select">' +
                                    '</div>'+
                                    '<div class="zixys-input-box">' +
                                        '<span class="zixys-menu-label">Nodes:</span>' +
                                        '<a class="dom-pointer" href="#zixys-pointer">{{selectorLink}}</a>' +
                                    '</div>'+
                                    '<div class="zixys-input-box">' +
                                        '<span class="zixys-menu-label">Count:</span>' +
                                        '<span>{{countElements}}</span>' +
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                            '<div>' +
                                '<div class="zixys-se-select-list">' +
                                    '<div select-list="zxNodes.selected" source="zxNodes.nodes" item="selector" options="nodesOpts"></div>' +
                                '</div>' +
                            '</div>'+
                            '<div>'+
                                '<div class="zixys-menu-block-xl">'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">Tag</span><input type="checkbox" ng-model="settings.tag" /></div>'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">Id</span><input type="checkbox" ng-model="settings.id" /></div>'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">Class</span><input type="checkbox" ng-model="settings.class" /></div>'+
                                '</div>'+
                            '</div>'+
                        '</div>'+
                    '</div>',


            link: function($scope, element) {
                element.find('#zx-selector-string').keydown(function(event){
                    if(event.keyCode === 13){
                        $scope.searchElements();
                        $scope.$apply();
                    }
                })
            },
            controller : ['$scope', 'selectorTools', 'zixysNode', 'zxNodes', function($scope, selectorTools, zixysNode, zxNodes){
                var nodes, zxNode;

                $scope.nodesOpts = {
                    view : false
                }

                $scope.zxNodes = zxNodes;
                $scope.settings = selectorTools.options;

                $scope.$on('nodeSelected',function(event, selectorString){
                    $scope.selector = selectorString;
                    $scope.searchElements();
                    $scope.$apply();
                });

                $scope.$watch('settings', function (newVal) {
                    if(newVal){
                        selectorTools.options = newVal;
                    }
                },true);

                $scope.searchElements = function() {
                    if (!$scope.selector) {
                        return;
                    };
                    $scope.selector = $scope.selector.toLowerCase();
                    nodes =$($scope.selector).not( 'div.zx__, div.zx__ *' );

                    if (nodes.length ===0 ) {
                        console.info('ZIXYS:: selector did not found any elements');
                        return;
                    }

                    zxNode = zixysNode($scope.selector);
                    zxNode.hasNodes(nodes);
                }

                $scope.$watch('zxNodes.selected', function (zixysNode) {
                    if (zixysNode) {
                        $scope.selector = zixysNode.selector
                        $scope.selectorLink = zixysNode.selector;
                        $scope.countElements = zixysNode.nodes.length;
                    }else{
                        $scope.selector = null;
                        $scope.selectorLink = null;
                        $scope.countElements = null;
                    }
                });

            }]
        }
    })

    .run(['$rootScope',function($rootScope){
        
        $rootScope.$on('zixysDomReady',function(event,params){
            $rootScope.addTab('Selector','selector-tab');
        });
        
    }]);
    
    